/** @format */

import React, {useState, useEffect} from 'react';
import {menuWrap} from './index.styl';
import {store} from '@/store';
import Router from 'next/router';

type List = {
  to: string;
  title: string;
};

interface IProps {
  [propName: string]: any;
}

const Menu = () => {
  const [isMenuShow, setState] = useState(false);
  const [bgImg, setBgimg] = useState('');
  store.subscribe(() => setState(store.getState().isStretch));

  const menuList = () => {
    const lists: Array<List> = [
      {
        to: '/fragment/1',
        title: 'Fragments',
      },
    ];

    const jump = (to: string) => {
      store.dispatch({type: 'isStretch', val: false});
      Router.push(to);
    };

    const listsEl = lists.map((item, index) => {
      return (
        <li key={index} onClick={() => jump(item.to)}>
          <a title={item.title}>{item.title}</a>
        </li>
      );
    });

    return <ul>{listsEl}</ul>;
  };

  // 背景图延迟加载
  useEffect(() => {
    setTimeout(() => setBgimg('url(https://static.yasol.cn/imgs/blog-user-menu-bg.jpg)'), 3000);
  }, []);

  return (
    <div className={`${menuWrap} ${isMenuShow ? 'menu-show' : ''}`} style={{backgroundImage: bgImg}}>
      <div>
        {menuList()}
        <p>If I should see you,after long years.How should I greet.with tears?with silence?</p>
      </div>
    </div>
  );
};

export default Menu;
